import Vue from "vue";

import VueRouter from "vue-router";

Vue.use(VueRouter);

const Home = () => import("@/pages/Home");
const Login = () => import("@/pages/Login");
const Register = () => import("@/pages/Register");
const Search = () => import("@/pages/Search");
const Detail = () => import("@pages/Detail");

//重写路由器的push方法
// 1.先获取原始的push方法,供自定义push中使用
const lastPush = VueRouter.prototype.push;
/* 
  为什么要重写push,因为push方法返回promise实例,但是如果我们不传递第三个参数onAbort,
  则push内部的catch函数没有处理异常的回调函数,所以如果push出错,就会直接抛出错误到浏览器上
*/
//2.重写push,覆盖之前的push方法,但是我们的push方法默认传入了onComplate和onAbort参数的默认参数为一个函数,那么如果push出现问题后,就会有catch的函数帮我们处理异常了,这个就是重写push的核心
VueRouter.prototype.push=function(
    location,
    onComplete=()=>{},
    onAbout=()=>{}
    ){
        /* 
    因为之前的push在VueRouter的原型对象上放,所以原本的push中this就是指向VueRouter的实例
    但是现在lastPush被直接默认调用,所以this就指向了undefined了,内部很可能出错
    我们在调用lastPush的时候,可以改变他的this指向VueRouter的实例
  */
 return lastPush.call(this,location,onComplete,onAbout);
    }
export default new VueRouter({
  mode: "history",//路由模式
  routes: [
    { path: "/home", component: Home, name: "home" },
    { path: "/login", component: Login, name: "login",meta:{isFooterHide:true}},
    { path: "/register", component: Register, name: "register" ,meta:{isFooterHide:true}},//meta：路由元信息
    { path:  "/detail/:skuId", component: Detail, name: "detail" },
    { path: "/search/:keyword?", component: Search, name: "search" },
    { path: "/", redirect: "/home" },
  ],
});
